<template>
	<div class="swiper swiper-container" ref="swiperRef">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(img, index) in imageList" :key="img.id">
				<img
					:class="{
						active: index === currentImgIndex,
					}"
					:src="img.imgUrl"
					:alt="img.imgName"
					@mouseenter="$emit('update:currentImgIndex', index)" />
			</div>
		</div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</template>

<script>
import Swiper, { Navigation } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'

export default {
	name: 'ImageList',
	props: {
		// 轮播的图片
		imageList: {
			type: Array,
		},
		// 当前显示高亮的下标
		currentImgIndex: Number,
	},
	watch: {
		imageList() {
			this.$nextTick(() => {
				new Swiper(this.$refs.swiperRef, {
					modules: [Navigation],

					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					// 一页展示5张
					slidesPerView: 3,
					// 5张为一组
					spaceBetween: 3,
				})
			})
		},
	},
}
</script>

<style lang="less" scoped>
.swiper-container {
	height: 56px;
	width: 412px;
	box-sizing: border-box;
	padding: 0 12px;

	.swiper-slide {
		display: flex;
		justify-content: center;

		img {
			width: 100%;
			height: 100%;
			border: 1px solid #ccc;
			padding: 2px;
			width: 50px;
			height: 50px;
			display: block;

			&.active {
				border: 2px solid #f60;
				padding: 1px;
			}

			&:hover {
				border: 2px solid #f60;
				padding: 1px;
			}
		}
	}

	.swiper-button-next {
		left: auto;
		right: 0;
	}

	.swiper-button-prev {
		left: 0;
		right: auto;
	}

	.swiper-button-next,
	.swiper-button-prev {
		box-sizing: border-box;
		width: 12px;
		height: 56px;
		background: rgb(235, 235, 235);
		border: 1px solid rgb(204, 204, 204);
		top: 0;
		margin-top: 0;
		&::after {
			font-size: 12px;
		}
	}
}
</style>
